<!--
 * @Author: 李佳晶111 11238117+lijiajing-111@user.noreply.gitee.com
 * @Date: 2023-04-07 15:43:01
 * @LastEditors: 李佳晶111 11238117+lijiajing-111@user.noreply.gitee.com
 * @LastEditTime: 2023-04-07 16:37:18
 * @FilePath: \2\shop\src\views\pages\usersList.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup>
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
import { useStore } from "vuex";
import { getAlljurisdiction, DeleteJurisdictionPage } from "@/api/services";
import AddOrEditUser from "@/components/AddOrEditUser";

const { proxy } = getCurrentInstance();
let queryData = reactive({
  currentPage: 1,
  pageSize: 10,
  search: "",
});
let tableData = reactive({ list: [] });
let total = ref(0);
let userRef = ref(null);
onMounted(() => {
  getList();
});

const getList = async (page = 1) => {
  //   console.log("page: ", page);
  if (typeof page != "object") {
    queryData.currentPage = page;
  }
  const res = await getAlljurisdiction(queryData);
  //   console.log("res: ", res);
  total.value = res.total;
  tableData.list = res.result;
};
const addOrEdit = async (title, item = {}) => {
  // console.log('item: ', item);
  userRef.value.open(title, item);
};
const deleteUser = item => {
  DeleteJurisdictionPage({ id: item.id });
  proxy.$message.success("删除成功");
  getList();
};
</script>
<template>
  <el-breadcrumb>
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>账号列表</el-breadcrumb-item>
  </el-breadcrumb>

  <div class="page_content">
    <div class="flex" style="margin-bottom: 20px">
      <div class="input_box">
        <el-input
          placeholder="搜索关键字"
          v-model="queryData.search"
          class="input-with-select"
        >
          <template #append>
            <el-button @click="getList"
              ><el-icon> <Search /> </el-icon
            ></el-button>
          </template>
        </el-input>
      </div>
      <el-button type="primary" @click="addOrEdit('新增用户', {})"
        >新增后台用户</el-button
      >
    </div>
    <el-table :data="tableData.list" stripe style="width: 100%">
      <el-table-column prop="username" label="用户名" />
      <el-table-column label="新增商品权限">
        <template #default="scope">
          <span>{{ scope.row.commodity ? "是" : "否" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="上下架">
        <template #default="scope">
          <span>{{ scope.row.putpush ? "是" : "否" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="修改库存">
        <template #default="scope">
          <span>{{ scope.row.stock ? "是" : "否" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="修改价格">
        <template #default="scope">
          <span>{{ scope.row.price ? "是" : "否" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="账号权限">
        <template #default="scope">
          <span>{{ scope.row.account ? "是" : "否" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button type="primary" @click="addOrEdit('修改用户', scope.row)"
            >修改</el-button
          >
          <el-popconfirm
            title="确定删除吗？"
            confirmButtonText="确定"
            cancelButtonText="取消"
            @confirm="deleteUser(scope.row)"
          >
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="example-pagination-block d-ac-jc">
      <el-pagination
        v-model:current-page="queryData.currentPage"
        :page-sizes="[100, 200, 300, 400]"
        background
        layout="total, prev, pager, next"
        :total="total"
        @current-change="getList"
      />
    </div>

    <AddOrEditUser ref="userRef" @refresh="getList" />
  </div>
</template>

<style scoped>
.input_box {
  width: 200px;
  margin-right: 15px;
}

.example-pagination-block {
  margin-top: 20px;
}

.example-pagination-block .example-demonstration {
  margin-bottom: 20px;
}
</style>
